<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
  object: {
    type: Object,
    required: true
  },
  type: {
    type: String,
    required: true
  }
})
const data = computed(() => {
  return props.type === '课件' ? props.object.article : props.object.question
})
</script>
<template>
  <div class="header">
    <h1 class="title">{{ data.title }}</h1>
    <div class="info-container">
      <div class="info-item">
        <div class="info-label">发布人</div>
        <div class="info-value">{{ object.user.nickName }}</div>
      </div>
      <div class="info-item">
        <div class="info-label">部门</div>
        <div class="info-value">{{ object.user.department }}</div>
      </div>
      <div class="info-item">
        <div class="info-label">类型</div>
        <div class="info-value">{{ data.type }}</div>
      </div>
    </div>
    <div class="meta-container">
      <div class="meta-text">发布时间： {{ data.date }}</div>
      <div class="meta-view">
        <van-icon name="eye-o" class="icon-margin" />
        {{ data.clickCount }}
      </div>
    </div>
  </div>
</template>
<style scoped>
.header {
  line-height: 2; /* 默认的 prose 行高 */
  margin: 1.5rem;
}
.title {
  font-weight: 500;
  font-size: 1.3rem;

}
.info-container {
  background-color: rgba(229, 231, 235, 0.5);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-radius: 0.25rem;
  margin-top: 0.75rem;

}
.info-item {
  margin: 0.25rem; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 33.33%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.info-label {
  margin: 0.25rem;
  color: #718096;
  text-align: center;
  width: 100%;
}
.info-value {
  margin: 0.25rem;
  font-weight: 500;
  text-align: center;
  width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.meta-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  margin-top: 0.25rem;
}
.meta-text {
  color: #a0aec0;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
.meta-view {
  color: #a0aec0;
  display: flex;
  align-items: center;
}
.icon-margin {
  margin-right: 0.5rem;
}
</style>
